<!--
 * @Description: 文件描述
 * @Version: 1.0
 * @Author: YueXuanzi
 * @Date: 2024-09-09 14:42:20
 * @LastEditors: YueXuanzi
 * @LastEditTime: 2024-10-07 14:27:59
 * @心得体会: 无
-->
<template>
    <div class="w-full">
        <el-form :inline="true" :model="formInline" class="w-full h-10">
            <el-form-item label="药品名称">
                <el-input v-model="formInline.drugName" placeholder="药品名称" clearable class="w-40"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="flex justify-between items-center w-full h-10">
      <el-button-group>
        <el-button type="success" @click="Add">添加</el-button>
      </el-button-group>
    </div>
    <!-- 表格显示 -->
    <el-table :data="tableData" style="width: 100%" border height="60vh" highlight-current-row @selection-change="selected">
        <el-table-column fixed type="selection" width="50" />
        <el-table-column prop="drugId" label="序号" width="80" align="center"></el-table-column>
        <el-table-column prop="drugName" label="药品名称"  align="center"></el-table-column>
        <el-table-column prop="drugNumber" label="数量"  align="center"></el-table-column>
        <el-table-column prop="unit" label="单位"  align="center"></el-table-column>
        <el-table-column prop="unit_price" label="单价"  align="center"></el-table-column>
        <el-table-column label="操作"  align="center">
            <template #default="scope">
                <el-button type="primary" @click="inout(scope.row, 0)">出库</el-button>
                <el-button type="success" @click="inout(scope.row, 1)">入库</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="flex justify-center items-end w-full h-16 mt-2">
        <el-pagination
            v-model:current-page="pageForm.currentPage"
            v-model:page-size="pageForm.pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageForm.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
            <el-switch v-model="background" class="ml-2" />
    </div>
    <el-dialog v-model="dialogFormVisible" title="添加药品" width="30%" :before-close="handleClose">
        <el-form :model="form" label-width="80px">
            <el-form-item label="药品名称">
                <el-input v-model="form.drugName" placeholder="请输入药品名称" clearable />
            </el-form-item>
            <el-form-item label="数量">
                <el-input v-model="form.number" placeholder="请输入数量" clearable type="number" />
            </el-form-item>
            <el-form-item label="单位">
                <el-input v-model="form.unit" placeholder="请输入单位" clearable />
            </el-form-item>
            <el-form-item label="单价">
                <el-input v-model="form.price" placeholder="请输入单价" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="toAdd(form)">添加</el-button>
                <el-button @click="handleClose">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    
</template>

<script setup>
import { computed, ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getList, add } from '@/api/user/drug.js'
import { useRouter } from 'vue-router';
const router = useRouter()
// 表格数据
const tableData = ref([
    { id : 1, drugName : "药1", number : 10, unit : "盒", price : 100 },
    { id : 2, drugName : "药2", number : 20, unit : "支", price : 200 },
    { id : 3, drugName : "药3", number : 30, unit : "kg", price : 300 },
    { id : 4, drugName : "药4", number : 40, unit : "盒", price : 400 },
    { id : 5, drugName : "药5", number : 50, unit : "盒", price : 500}
]) 
// 背景
const background = ref(false)
// 最后一页面
const pageForm = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 50
})
// 搜索
const formInline = reactive({
    drugName: "",
})
const pageSearch = computed(() => {
  return {
    page: pageForm.currentPage,
    limit: pageForm.pageSize,
    drugName: formInline.drugName
  }
})
const dialogFormVisible = ref(false)
// 选择复选框
let idArr = []
const selected = (data) => {
  idArr = []
  data.forEach((value) => {
    idArr.push(value)
  })
  console.log(data)
  console.log(idArr)
}
// 添加列表
let form = reactive({
  drugName: "",
  number: 0,
  unit: "",
  price: ""
})

initData()
// 初始化方法
function initData(){
  console.log(pageSearch.value)
  getList(pageSearch.value).then(res =>{
        console.log(res)
        // 初始化表格数据
        tableData.value = res.data.list
        pageForm.total = res.data.totalCount
        pageForm.currentPage = res.data.currPage
        pageForm.pageSize = res.data.pageSize
    })
}

// 搜搜
const onSearch = () => {
  // console.log(pageSearch)
  initData()
}
// 双击查看
const getInfo = (row, event, column) => {
  console.log(row.id)
}

const handleSizeChange = (val) => {
  // console.log(`${val} items per page`)s
  initData()
}
const handleCurrentChange = (val) => {
  // console.log(`current page: ${val}`)
  initData()
}

const handleClose = () => {
  ElMessageBox.confirm('你确定取消当前操作吗？',{
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => {
      dialogFormVisible.value = false
        ElMessage({
            type: 'success',
            message: "已取消",
        })
    })
    .catch(() => {
      
    })
}
const Add = () => {
  dialogFormVisible.value = true
  form = reactive({
    drugName: "",
    number: "",
    unit: "",
    price: ""
  })
 }
const toAdd = (data) => {
  console.log(data)
  add(data).then(res => {
    console.log(res)
    ElMessage({
      type: 'success',
      message: '添加成功'
    })
    dialogFormVisible.value = false
    initData()
  })
}

// 入库出库
const inout = (row, type) => {
  console.log(row)
  console.log(type)
  row.type = type + ""
  router.push({
    path:'/inout',
    query: row
  })
}
</script>

<style scoped>

</style>